import { ref, reactive, onMounted } from "vue";
// 导入获取角色列表接口
import { getRoleList } from "@/api/roleAPI";

export const useRoleDataList = () => {
  // 表格列的配置
  const columns = reactive([
    {
      title: "角色id",
      dataIndex: "role_id",
      key: "role_id",
    },
    {
      title: "角色名",
      dataIndex: "role_name",
      key: "role_name",
    },
    {
      title: "操作",
      key: "operation",
      slots: { customRender: "operation" },
    },
  ]);

  // 定义用户列表
  const data = ref([]);

  // 获取角色列表数据
  const getRoleData = () => {
    // 发送请求获取角色列表
    getRoleList()
      .then((res) => {
        data.value = res.data;
      })
      .catch((error) => {
        throw new Error(error);
      });
  };

  onMounted(() => {
    getRoleData();
  });

  return {
    columns,
    data,
    getRoleData,
  };
};
